(U 'ᴗ' U)✧ 日安。我是SONYKO
今天是快樂的假日。所以想來點輕鬆的。

學了不少JavaScript ，我們還是得學以致用！
所以我們來試著寫出一個 BMI 計算機 出來吧 ♫

Let's　JavaScript ♡

⑅　該從何下手 (U 'ᴗ' U)？

超概分可以分成五個步驟：

1. 我們要做一個介面。( 最少最少也要有 input 和 button )
2. DOM 取得節點、input 要取得他的 value 才能去計算。
3. 寫一個 計算 BMI 的函式。
4. 加上一些防呆機制
5. 寫一個 將結果渲染到畫面上的函式。
6. 裝上監聽。

⑅　刻一個介面吧 ♫

你各位練習 HTML / CSS 的機會來了！
我邊看東京電玩展直播 邊刻了一個版出來 (U 'ᴗ' U)
如果只想練邏輯也可以直接拿去用 la ✧

Codepen附上

⑅　取DOM 和 一些注意事項

我們要取input 的値( value )，但我們取出來的數字 其實是字串 。

那你們還記得，如果是字串的話，運算會發生什麼事？
abc * abe // NaN

"111"+"222" // "111222"

這樣不能運算8 (U 'ᴗ' U)？所以我們要把他們轉換成 數字 。

⑅　"型別string" → "型別number"

這邊分享兩種方式：

1. 使用 parseInt ( )
2. 使用 Number ( )

/* parseInt */
var h = parseInt(height.value)
console.log (typeof(h))          // number

/* Number */
var h = Number(height.value)
console.log(typeof(h))           // number

⑅　parseInt 和 Number 的差異

• parseInt：將字串轉換為 整數 。
• Number：將字串轉換為 數字 。

這樣講可能還不太知道到底差在哪，我們來舉例：

Number("7日") // NaN
Number("0.1") // 0.1
Number("010") // 10

/* 如果是一般的10進位運算(一般的運算)，用 Number 比較理想 */

parseInt("7日") // 7
parseInt("0.1") // 0
parseInt("010") // 10

/* 若要用在2進位 或 8進位等特殊運算，可以考慮用 parseInt */

資料參考來源：TechAcademy

⑅　計算BMI 的函式

1. 這邊記得要取出 input 的 value ，轉換成數字後計算。
2. BMI 公式：體重 / 身高(公尺) *身高(公尺)
3. 使用 toFixed( ) ：計算出的結果取小數點後幾位。
   （ 不然算出來的結果會超級無敵長 ）

⑅　防呆機制

為了防止使用者輸入的是數字以外的東西，所以我們加上防呆機制。
可以使用 if else 來寫。

如果使用者輸入的是正確數値 就計算，如果是怪怪的東西就 alert 錯誤訊息。

⑅　將計算結果渲染到畫面上

我們要渲染的東西有「 BMI 計算結果 」和「 BMI 的狀態 」。

還記得我們說到的 textContent 和 innerHTML 嗎 ？
可以使用他們來將結果渲染上去 (U 'ᴗ' U) ♡
　

⑅　樣板字面値 Template Literal

樣板字面値 是ES6 加入的新功能。
可以用它來插入多行文字 、帶入變數或參數 ，十分強大。

直接看程式碼比較好理解：

⑅　傳統寫法：

var cat = miumiu
var age = 10
console.log( "我的貓貓叫" + cat + "他今年" + age + "歲。" )

如果有10個變數要加進去這段話，我們不就要一直 "字串" + 變數 + "字串" + 變數 ...
寫到起笑 (((

因此樣板字面値 就被發明了，用了你就回不去了。

⑅　樣板字面値寫法：

var cat = miumiu
var age = 10
console.log( `我的貓貓叫${cat},他今年${age}歲。` )

方便多了吧，這樣你就不用怕少加號 or 少雙引號了。拿來渲染用超方便。
樣板字面値 是使用 `` 和 ${ } 來撰寫的。 詳細參照 MDN 。

那之後範例就不打傳統寫法了歐歐歐 。

⑅　最後記得裝上監聽

沒有監聽就不會動rrr
就像你煮完便當放在家裡沒帶一樣 ((

我們要監聽的對象為 BMI 計算函式 。
記得要將所有的函式都要回傳至 BMI 計算函式 。

(按鈕).addEventListener('click',(BMI計算函式));

如此一來就大功告成哩 (U 'ᴗ' U) ♡

這邊放上我的實作 給大家鞭策

我們這兩週學到的東西，已經可以做出一個功能了！
如果覺得邏輯還是很卡，可以熟悉前面的基礎 ～ ♫　加油

୨୧(U 'ᴗ' U) SONYKO的　前端日文小教室 ♡

音檔